<template>
  <div class="promotion-warp">
    <div class="promotion-header">
      <div class="promotion-header-warp">
        <i class="promotion-header-icon animate__animated animate__bounceInUp">
          <t-icon name="books" style="width: 32; height: 32"></t-icon
        ></i>
        <div class="promotion-header-title">
          <h1 class="animate__animated animate__bounceInUp">推广中心<br /></h1>
          <div class="p-detail animate__animated animate__bounceInUp">
            <p>"数据一目了然"<br /></p>
          </div>
        </div>
      </div>
    </div>
    <main class="promotion-main">
      <div class="promotion-main-header">
        <div class="promotion-cash-warp extemsion-1">
          <header class="promotion-cash-warp title-1">
            <h1>佣金明细</h1>
          </header>
          <div class="pro-cards">
            <t-card class="promotion-card pro-card">
              <t-tooltip class="item" content="3个工作日到账">
                <div class="commission">
                  <h3>提现中</h3>
                  <i> <t-icon name="time-filled" size="2rem" /> </i>
                </div>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.hasNotGetCash }} 元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="promotion-card pro-card cash-info" @click="getCashInfo">
              <t-tooltip class="item" content="已经提现的金额">
                <div class="commission">
                  <h3>已提现</h3>
                  <i> <t-icon name="check-circle-filled" size="2rem"></t-icon> </i>
                </div>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.hasGetCash }}元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="promotion-card pro-card">
              <t-tooltip class="item" content="3个工作日解冻,防止被邀请人因故退款">
                <div class="commission">
                  <h3>冻结金额</h3>
                  <i> <t-icon name="browse-off" size="2rem"></t-icon> </i>
                </div>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.frozenCash }} 元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="promotion-card pro-card">
              <t-tooltip class="item" content="累计结算佣金金额">
                <div class="commission">
                  <h3>推广用户数</h3>
                  <i> <t-icon name="chart-bubble" size="2rem"></t-icon> </i>
                </div>
                <div class="commission-info">
                  <p>{{ extensionInfo.shareUserCount }}人</p>
                </div>
              </t-tooltip>
            </t-card>
          </div>
        </div>
        <div class="promotion-data-warp extemsion-1">
          <header class="promotion-data-warp-header title-1">
            <h1>推广数据</h1>
          </header>
          <div class="data-cards">
            <t-card class="promotion-card pro-card">
              <t-tooltip class="item" content="3个工作日到账">
                <div class="commission">
                  <h3>可提现金额</h3>
                  <i> <t-icon name="money-circle" size="2rem"></t-icon> </i>
                </div>
                <div class="commission" style="margin-top: 2rem">
                  <p>¥ {{ extensionInfo.mayWithdrawCash }} 元</p>
                  <button class="promotion-btn" @click="getCommission()">提现</button>
                </div>
                <t-divider>邀请码</t-divider>
                <div class="commission">
                  <p>&nbsp {{ userInfo.myPromotionCode }}</p>
                  <button
                    class="promotion-btn"
                    @click="copyToClipboard(getUrl(userInfo.myPromotionCode))"
                  >
                    复制
                  </button>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="promotion-card pro-card share-card-1">
              <t-tooltip
                class="item"
                content="等级1:邀请5人.等级2:邀请15人.等级3:邀请25人.等级4:邀请40人"
              >
                <div class="commission">
                  <h3>推广进度</h3>
                  <loading-icon size="2rem" style="color: green" />
                </div>
                <div class="commission-info">
                  <t-space class="t-progress-demo-box" size="small" :direction="checkWidth()">
                    <t-space
                      align="center"
                      direction="vertical"
                      size="small"
                      class="t-progress-demo-inner"
                    >
                      <t-progress theme="circle" :percentage="shareLevel1" />
                      <div class="t-progress-demo-margin">入门新秀</div>
                    </t-space>
                    <t-space
                      align="center"
                      direction="vertical"
                      size="small"
                      class="t-progress-demo-inner"
                    >
                      <t-progress theme="circle" :percentage="shareLevel2" />
                      <div class="t-progress-demo-margin">帮派掌门</div>
                    </t-space>
                    <t-space
                      align="center"
                      direction="vertical"
                      size="small"
                      class="t-progress-demo-inner"
                    >
                      <t-progress theme="circle" :percentage="shareLevel3" />
                      <div class="t-progress-demo-margin">武林盟主</div>
                    </t-space>
                    <t-space
                      align="center"
                      direction="vertical"
                      size="small"
                      class="t-progress-demo-inner"
                    >
                      <t-progress theme="circle" :percentage="shareLevel4" />
                      <div class="t-progress-demo-margin">一统江湖</div>
                    </t-space>
                  </t-space>
                </div>
              </t-tooltip>
            </t-card>
          </div>
        </div>
        <div class="promotion-order-data-warp extemsion-1">
          <header class="promotion-order-data-warp-header title-1">
            <h1>订单统计</h1>
          </header>
          <div class="order-data-cards">
            <t-card class="order-data-card pro-card">
              <t-tooltip class="item" content="所有的订单,包含退款订单">
                <t-divider class="order-divider">推广总订单数</t-divider>
                <div class="commission-info">
                  <p>{{ extensionInfo.orderCount }}</p>
                </div>
                <t-divider class="order-divider">推广订单金额</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.orderAmount }}元</p>
                </div>
                <t-divider class="order-divider">预估总佣金</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.estimatedCommission }} 元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="order-data-card pro-card">
              <t-tooltip class="item" content="所有的订单,包含退款订单">
                <t-divider class="order-divider">未退款总订单数</t-divider>
                <div class="commission-info">
                  <p>{{ extensionInfo.unsettledOrderCount }}</p>
                </div>
                <t-divider class="order-divider">未退款订单金额</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.unsettledOrderAmount }}元</p>
                </div>
                <t-divider class="order-divider">未退款总佣金</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.unsettledCommission }}元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="order-data-card pro-card">
              <t-tooltip class="item" content="所有的订单,包含退款订单">
                <t-divider class="order-divider">退款总订单数</t-divider>
                <div class="commission-info">
                  <p>{{ extensionInfo.refundedOrderCount }}</p>
                </div>
                <t-divider class="order-divider">退款订单金额</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.refundedOrderAmount }} 元</p>
                </div>
                <t-divider class="order-divider">退款总佣金</t-divider>
                <div class="commission-info">
                  <p>¥ {{ extensionInfo.refundedOrderCommission }} 元</p>
                </div>
              </t-tooltip>
            </t-card>
            <t-card class="order-data-card pro-card">
              <t-tooltip class="item" content="所有的订单,包含退款订单">
                <t-divider class="order-divider">结算总订单数</t-divider>
                <div class="commission-info">
                  <p>{{ extensionInfo.settledOrderCount }}</p>
                </div>
                <t-divider class="order-divider">结算订单金额</t-divider>
                <div class="commission-info">
                  <p>¥{{ extensionInfo.settledAmount }} 元</p>
                </div>
                <t-divider class="order-divider">结算总佣金</t-divider>
                <div class="commission-info">
                  <p>¥{{ extensionInfo.sumCommission }} 元</p>
                </div>
              </t-tooltip>
            </t-card>
          </div>
        </div>
        <div class="promotion-order-warp extemsion-1">
          <header class="promotion-order-data-warp-header title-1">
            <h1>推广订单</h1>
            <h3 v-if="orderAllList.length <= 0">无推广订单,继续努力哦~</h3>
          </header>
          <div class="pro-order-cards">
            <div
              class="pro-order-card pro-card order-card-1"
              v-for="(item, index) in orderAllList"
              :key="index"
              v-bind="item"
            >
              <t-card bordered>
                <div class="commission pro-data-commission" style="margin-bottom: 0">
                  <div class="pro-commission-time-data">
                    <p>结算时间:</p>
                    <p>&nbsp {{ item.settleTime }}</p>
                  </div>
                  <div class="pro-commission-time-data">
                    <p>订单状态:</p>
                    <t-tag
                      :theme="item.settleStatus === '已结算' ? 'success' : 'danger'"
                      variant="light"
                      style="margin-left: 5px"
                    >
                      {{ item.settleStatus }}</t-tag
                    >
                  </div>
                </div>
                <div class="content-wrapper">
                  <div class="goods-container">
                    <!-- 商品图片 -->
                    <div class="cover"><img v-lazy="item.imgUrl" alt="" /></div>

                    <!-- 商品名称和属性规格 -->
                    <div class="goods-info">
                      <div class="name">{{ item.className }}</div>
                      <div class="specs">{{ item.subjectName }}</div>
                      <t-tag
                        shape="mark"
                        :theme="item.commissionRate === '30.00%' ? 'danger' : 'default'"
                        >{{ item.commissionRate === '30.00%' ? '首单' : '非首单' }}</t-tag
                      >
                    </div>
                  </div>
                  <div class="price-time">
                    <!-- 商品价格和支付方式 -->
                    <div class="commission-pro-info-data">
                      <p>付款金额:</p>
                      <p>&nbsp￥{{ item.price }} 元</p>
                    </div>
                    <div class="commission-pro-info-data">
                      <p>佣金率</p>
                      <p>&nbsp{{ item.commissionRate }}</p>
                    </div>
                    <div class="commission-pro-info-data">
                      <p>服务费</p>
                      <p>&nbsp3%</p>
                    </div>
                    <div class="commission-pro-info-data">
                      <p>结算佣金</p>
                      <p>&nbsp{{ item.commission }}</p>
                    </div>
                  </div>
                </div>
                <div class="commission pro-data-commission">
                  <div class="pro-commission-time-data">
                    <p>订单号:</p>
                    <p>&nbsp{{ item.orderCode }}</p>
                  </div>
                  <div class="pro-commission-time-data">
                    <p>支付时间:</p>
                    <p>&nbsp{{ item.payTime }}</p>
                  </div>
                </div>
              </t-card>
            </div>
            <t-pagination
              v-if="orderAllList.length > 0"
              :on-page-size-change="handlePageSizeChange"
              :on-current-change="handleCurrentChange"
              :current.sync="currentPage"
              :total="total"
              showPageNumber
              :pageSize.sync="pageSize"
              :showPageSize="false"
              showPreviousAndNextBtn
              totalContent
              style="margin-top: 2rem"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
  <t-dialog
    :visible.sync="commisionDialogVisible"
    :closeOnOverlayClick="false"
    :footer="false"
    :on-close="closeCommisionDialog"
    theme="success"
    header="申请提现"
    :width="isMobilePhone ? '90%' : '600'"
  >
    <div>
      <t-form ref="formRef" :data="formData" :rules="rules" @submit="onSubmit">
        <t-form-item label="提现金额:" name="numMonery">
          <t-input v-model:value="formData.numMonery" placeholder="请输入提现金额">
            <template #suffix>
              <t-button size="small" variant="text" @click="allGetMonery">全部提现</t-button>
            </template>
          </t-input>
        </t-form-item>
        <t-tabs :default-value="2" @change="handleTabChange">
          <t-tab-panel :value="2" label=" 微信"
            ><div style="padding: 24px 24px 24px 0">
              <t-form-item label="姓名:" name="wxName">
                <t-input v-model:value="formData.wxName" placeholder="请输入微信实名验证名称" />
              </t-form-item>
              <t-form-item label="备注:" name="remark">
                <t-input v-model:value="formData.remark" placeholder="请输入备注信息" />
              </t-form-item>
            </div>
          </t-tab-panel>
          <t-tab-panel :value="1" label="支付宝"
            ><div style="padding: 24px 24px 24px 0">
              <t-form-item label="姓名:" name="username">
                <t-input v-model:value="formData.username" placeholder="请输入支付宝实名验证名称" />
              </t-form-item>
              <t-form-item label="账号:" name="account">
                <t-input v-model:value="formData.account" placeholder="请输入支付宝账号" />
              </t-form-item>
              <t-form-item label="确认账号:" name="checkAccount">
                <t-input v-model:value="formData.checkAccount" placeholder="请再次输入支付宝账号" />
              </t-form-item>
              <t-form-item label="备注:" name="remark">
                <t-input v-model:value="formData.remark" placeholder="请输入备注信息" />
              </t-form-item>
            </div>
          </t-tab-panel>
          <t-tab-panel :value="3" label="银行卡">
            <div style="padding: 24px 24px 24px 0">
              <t-form-item label="开户行:" name="bankName">
                <t-input v-model:value="formData.bankName" placeholder="请输入开户行" />
              </t-form-item>
              <t-form-item label="支行:" name="bankBranch">
                <t-input v-model:value="formData.bankBranch" placeholder="请输入支行" />
              </t-form-item>
              <t-form-item label="姓名:" name="bankUsername">
                <t-input
                  v-model:value="formData.bankUsername"
                  placeholder="请输入银行卡实名验证名称"
                />
              </t-form-item>
              <t-form-item label="账号:" name="bankAccount">
                <t-input v-model:value="formData.bankAccount" placeholder="请输入银行卡账号" />
              </t-form-item>
              <t-form-item label="确认账号:" name="checkBankAccount">
                <t-input
                  v-model:value="formData.checkBankAccount"
                  placeholder="请再次输入银行卡账号"
                />
              </t-form-item>
              <t-form-item label="备注:" name="remark">
                <t-input v-model:value="formData.remark" placeholder="请输入备注信息" />
              </t-form-item>
            </div>
          </t-tab-panel>
          <t-tab-panel :value="4" label="USDT"
            ><div style="padding: 24px 24px 24px 0">
              <t-form-item label="USDT地址:" name="address">
                <t-input v-model:value="formData.address" placeholder="请输入USDT(ERC20)地址" />
              </t-form-item>
              <t-form-item label="确认地址:" name="checkAddress">
                <t-input
                  v-model:value="formData.checkAddress"
                  placeholder="请输入USDT(ERC20)地址"
                />
              </t-form-item>
              <t-form-item label="备注:" name="remark">
                <t-input v-model:value="formData.remark" placeholder="请输入备注信息" />
              </t-form-item>
            </div>
          </t-tab-panel>
        </t-tabs>
        <t-button type="submit" theme="primary">提交</t-button>
      </t-form>
    </div>
  </t-dialog>

  <t-drawer
    :visible.sync="cashInfoDialogVisible"
    :closeOnOverlayClick="false"
    size="100%"
    :closeBtn="true"
    :on-close="closeCashInfoDialog"
    :on-confirm="closeCashInfoDialog"
  >
    <template #closeBtn>
      <div class="cash-info-header-close" style="margin-right: 2rem">
        <t-icon name="close" size="20" @click="closeCashInfoDialog" />
      </div>
    </template>
    <template #header>
      <div class="cash-info-header">
        <div class="cash-info-header-title">提现记录</div>
      </div>
    </template>
    <div>
      <t-table
        rowKey="id"
        :data="cashInfoList"
        :columns="cashInfoColumns"
        bordered
        :hover="true"
        :stripe="true"
        :pagination="pagination"
      />
    </div>
  </t-drawer>
</template>
<script setup>
import { LoadingIcon } from 'tdesign-icons-vue-next'
import { getExtensionInfo, getExtensionOrders, withdraw, getWithdrawInfo } from '@/api/extension'
import { MessagePlugin } from 'tdesign-vue-next'
import { getUser } from '@/utils/auth'
import { copyToClipboard, getUrl, watchIsMobile, checkIsMobile } from '@/utils/util'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showJumper: true
})
let userInfo = computed(() => {
  const userStr = getUser()
  return userStr ? JSON.parse(userStr) : {}
})
const extensionInfo = ref({})
const shareLevel1 = ref(0)
const shareLevel2 = ref(0)
const shareLevel3 = ref(0)
const shareLevel4 = ref(0)
const wxCommision = ref(true)
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const orderAllList = ref([])
const commisionDialogVisible = ref(false)
const payType = ref(2)
const cashInfoDialogVisible = ref(false)
const cashInfoList = ref([])
const isMobilePhone = ref(checkIsMobile())
const onIsMobileChange = newIsMobile => {
  isMobilePhone.value = newIsMobile
}
onMounted(() => {
  const unwatch = watchIsMobile(onIsMobileChange)
  onBeforeUnmount(unwatch)
})
const getCashInfoList = async () => {
  const res = await getWithdrawInfo({
    pageNo: pagination.current,
    pageSize: pagination.pageSize
  })
  if (res.code === 200) {
    pagination.total = res.total
    //处理返回的数据
    //console.log(res.data)
    cashInfoList.value = res.data.map(item => {
      return {
        cashNum: item.count,
        cashType: item.payType,
        cashTime: item.createTime,
        cashStatus: item.status,
        cashUpdateTIme: item.updateTime,
        cashRemark: item.remark
      }
    })
  }
}

//表格抬头
const cashInfoColumns = ref([
  {
    colKey: 'cashNum',
    title: '提现金额',
    ellipsis: true,
    align: 'center'
  },
  {
    colKey: 'cashType',
    title: '提现方式',
    ellipsis: true,
    align: 'center'
  },
  {
    colKey: 'cashTime',
    title: '提现时间',
    ellipsis: true,
    align: 'center'
  },
  {
    colKey: 'cashStatus',
    title: '提现状态',
    ellipsis: true,
    align: 'center'
  },
  {
    colKey: 'cashUpdateTIme',
    title: '更新时间',
    ellipsis: true,
    align: 'center'
  },
  {
    colKey: 'cashRemark',
    title: '备注',
    ellipsis: true,
    align: 'center'
  }
])

const formData = ref({
  wxName: '',
  numMonery: '',
  username: '',
  account: '',
  checkAccount: '',
  bankName: '',
  bankBranch: '',
  bankUsername: '',
  bankAccount: '',
  checkBankAccount: '',
  address: '',
  checkAddress: '',
  remark: ''
})
const formRef = ref(null)
const rules1 = ref({})
const rules = ref({
  wxName: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  numMonery: [
    {
      required: true,
      message: '请输入提现金额',
      trigger: 'blur'
    },
    {
      validator: value => {
        if (value < 100) {
          return {
            result: false,
            message: '输入金额不能小于 100',
            type: 'error'
          }
        } else if (value > extensionInfo.value.mayWithdrawCash) {
          return {
            result: false,
            message: '输入金额超出可提现范围',
            type: 'error'
          }
        } else {
          return {
            result: true,
            message: '验证成功!',
            type: 'success'
          }
        }
      },
      trigger: 'blur'
    }
  ],
  username: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  checkAccount: [
    {
      required: true,
      message: '请输入确认账号',
      trigger: 'blur'
    },
    {
      validator: value => {
        if (value !== formData.value.account) {
          //console.log(value, formData.value.account)
          return {
            result: false,
            message: '两次输入账号不一样',
            type: 'error'
          }
        } else {
          return {
            result: true,
            message: '验证成功!',
            type: 'success'
          }
        }
      },
      trigger: 'blur'
    }
  ],
  bankUsername: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    }
  ],
  bankAccount: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    }
  ],
  checkBankAccount: [
    {
      required: true,
      message: '请输入确认账号',
      trigger: 'blur'
    },
    {
      validator: value => {
        if (value !== formData.value.bankAccount) {
          return {
            result: false,
            message: '两次输入账号不一样',
            type: 'error'
          }
        } else {
          return {
            result: true,
            message: '验证成功!',
            type: 'success'
          }
        }
      },
      trigger: 'blur'
    }
  ],
  bankName: [
    {
      required: true,
      message: '请输入开户行',
      trigger: 'blur'
    }
  ],
  bankBranch: [
    {
      required: true,
      message: '请输入支行',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: true,
      message: '请输入USDT地址',
      trigger: 'blur'
    }
  ],
  checkAddress: [
    {
      required: true,
      message: '请输入确认USDT地址',
      trigger: 'blur'
    },
    {
      validator: value => {
        if (value !== formData.value.checkAddress) {
          return {
            result: false,
            message: '两次输入地址不一样',
            type: 'error'
          }
        } else {
          return {
            result: true,
            message: '验证成功!',
            type: 'success'
          }
        }
      },
      trigger: 'blur'
    }
  ]
})
const closeCashInfoDialog = () => {
  cashInfoDialogVisible.value = false
}
const closeCommisionDialog = () => {
  commisionDialogVisible.value = false
}

const handlePageSizeChange = newPageSize => {
  pageSize.value = newPageSize
  currentPage.value = 1
  getOrders()
}
const handleCurrentChange = newCurrentPage => {
  currentPage.value = newCurrentPage
  getOrders()
}

const getOrders = async () => {
  let data = {
    pageSize: pageSize.value,
    pageNo: currentPage.value
  }
  const res = await getExtensionOrders(data)
  //console.log(res)
  if (res.code === 200) {
    orderAllList.value = res.data
    total.value = res.total
  }
}

const getExtensionInfoData = async () => {
  const res = await getExtensionInfo()
  if (res.code === 200) {
    //console.log(res.data)
    extensionInfo.value = res.data
    let shareLevel = res.data.shareUserCount
    shareLevel1.value = parseFloat(((shareLevel / 5) * 100).toFixed(2))
    shareLevel2.value = parseFloat(((shareLevel / 15) * 100).toFixed(2))
    shareLevel3.value = parseFloat(((shareLevel / 30) * 100).toFixed(2))
    shareLevel4.value = parseFloat(((shareLevel / 40) * 100).toFixed(2))
  }
}
const getLoginStatus = () => {
  if (userStore.isLoggedIn) {
    getOrders()
    getExtensionInfoData()
  }
}
getLoginStatus()
const getRulesValue = () => {
  rules1.value = Object.assign({}, rules.value)
  //console.log(rules1)
}
getRulesValue()
const checkWidth = () => {
  return window.innerWidth > 900 ? 'horizontal' : 'vertical'
}
watchEffect(() => {
  window.addEventListener('resize', checkWidth)
})

const getCommission = () => {
  if (!userStore.isLoggedIn) {
    MessagePlugin.error('请登录!')
    return
  }
  commisionDialogVisible.value = true
}

const handleTabChange = tabName => {
  if (tabName === 2) {
    rules.value.bankUsername = null
    rules.value.bankAccount = null
    rules.value.checkBankAccount = null
    rules.value.bankName = null
    rules.value.bankBranch = null
    rules.value.account = null
    rules.value.checkAccount = null
    rules.value.username = null
    rules.value.address = null
    rules.value.checkAddress = null
    rules.value.wxName = rules1.value.wxName
    if (userInfo.subscribeStatus !== 1) {
      wxCommision.value = false
    }
    payType.value = 2
  }
  if (tabName === 1) {
    rules.value.bankUsername = null
    rules.value.bankAccount = null
    rules.value.checkBankAccount = null
    rules.value.bankName = null
    rules.value.bankBranch = null
    rules.value.address = null
    rules.value.checkAddress = null
    rules.value.wxName = null
    rules.value.account = rules1.value.account
    rules.value.checkAccount = rules1.value.checkAccount
    rules.value.username = rules1.value.username
    payType.value = 1
  }
  if (tabName === 3) {
    rules.value.account = null
    rules.value.checkAccount = null
    rules.value.username = null
    rules.value.address = null
    rules.value.checkAddress = null
    rules.value.wxName = null
    rules.value.bankUsername = rules1.value.bankUsername
    rules.value.bankAccount = rules1.value.bankAccount
    rules.value.checkBankAccount = rules1.value.checkBankAccount
    rules.value.bankName = rules1.value.bankName
    rules.value.bankBranch = rules1.value.bankBranch
    rules.value.bankUsername = rules1.value.bankUsername
    payType.value = 3
  }
  if (tabName === 4) {
    //开启USDT的表单验证
    rules.value.account = null
    rules.value.checkAccount = null
    rules.value.username = null
    rules.value.bankAccount = null
    rules.value.checkBankAccount = null
    rules.value.bankName = null
    rules.value.bankBranch = null
    rules.value.bankUsername = null
    rules.value.wxName = null
    rules.value.address = rules1.value.address
    rules.value.checkAddress = rules1.value.checkAddress
    payType.value = 4
  }
}
const onSubmit = ({ validateResult, firstError }) => {
  let data = {}
  if (validateResult === true) {
    //console.log(wxCommision.value)
    if (payType.value === 2) {
      if (!wxCommision) {
        MessagePlugin.error('请先绑定微信,再使用微信提现!')
        return
      }
      data = {
        payType: payType.value,
        cost: formData.value.numMonery,
        userName: formData.value.wxName,
        remark: formData.value.remark
      }
    } else if (payType.value === 1) {
      data = {
        payType: payType.value,
        cost: formData.value.numMonery,
        account: formData.value.account,
        checkAccount: formData.value.checkAccount,
        userName: formData.value.username
      }
    } else if (payType.value === 3) {
      data = {
        payType: payType.value,
        cost: formData.value.numMonery,
        userName: formData.value.bankUsername,
        account: formData.value.bankAccount,
        checkAccount: formData.value.checkBankAccount,
        bankName: formData.value.bankName,
        bankBranchName: formData.value.bankBranch,
        remark: formData.value.remark
      }
    } else if (payType.value === 4) {
      data = {
        payType: payType.value,
        cost: formData.value.numMonery,
        account: formData.value.address,
        checkAccount: formData.value.checkAddress,
        remark: formData.value.remark
      }
    }
    withdraw(data).then(res => {
      if (res.code === 200) {
        MessagePlugin.success('提现申请提交成功,请耐心等待审核!')
        commisionDialogVisible.value = false
        getExtensionInfoData()
      } else {
        MessagePlugin.error(res.msg)
      }
    })
  } else {
    //console.log('Validate Errors: ', firstError, validateResult)
    MessagePlugin.warning(firstError)
  }
}
const allGetMonery = () => {
  formData.value.numMonery = extensionInfo.value.mayWithdrawCash
}

const getCashInfo = () => {
  if (!userStore.isLoggedIn) {
    //console.log(userStore.isLoggedIn)
    MessagePlugin.error('请登录!')
    return
  }
  cashInfoDialogVisible.value = true
  getCashInfoList()
}

//表格抬头
</script>

<style lang="scss" scoped>
.cash-info-header {
  width: 100%;
}
.t-drawer :deep(.t-drawer__close-btn) {
  margin-right: 2rem !important;
}
.cash-info {
  cursor: pointer;
}
.price-time {
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  height: 100px;
  box-shadow: var(--shadow-2);
}

.order-card-1 {
  padding: 10 !important;
  margin-bottom: 2rem;
}
.order-card-1:last-child {
  margin-bottom: 0 !important;
}
.title-1 h1 {
  font: var(--Heading-1);
  font-size: 3rem;
  color: var(--text-title-color-1);
  margin-bottom: var(--spacing-page-sm);
  -webkit-box-align: center;
}
.title-1 h3 {
  color: var(--text-title-color-1);
  margin-bottom: var(--spacing-page-sm);
  -webkit-box-align: center;
}
.cash-info-header-title {
  color: var(--text-title-color-1);
}
.pro-order-cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.data-cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}
.commision-info {
  width: 100%;
  white-space: normal;
}
.promotion-btn {
  outline: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  position: relative;
  font-size: 16px;
  left: auto;
  margin-top: 0px;
  color: var(--white);
  padding: 8px 0.5rem;
  background: rgba(66, 171, 251, 0.75);
  border-radius: var(--radius-8);
  transition: var(--transition-easeOut-2);
  box-shadow: var(--shadow-2);
  width: 30%;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}
.promotion-btn:hover {
  box-shadow: var(--shadow-2);
  transform: scale(1.05);
}
.order-data-cards,
.pro-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.pro-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius-18);
  padding: 30px;
  transition: var(--transition-easeOut-2);
  box-shadow: var(--shadow-2);
  color: var(--text-title-color-1);
}


.extemsion-1 {
  margin-top: var(--spacing-page-mid-120);
  width: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--view-1);
  box-sizing: border-box;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.extemsion-1:last-child {
  margin-bottom: var(--spacing-page-mid-120);
}

.commission {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.pro-commission-time-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.promotion-warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  background-color: var(--white-card-color-1);
}
.promotion-header {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  position: relative;
  z-index: 99;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
}
.promotion-header-warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: var(--spacing-page-mid) 0;
  background: var(--help-bg-img);
  background-repeat: no-repeat;
}
.promotion-header-icon {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: inherit;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-18);
  background-color: var(--white);
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 40px;
  box-shadow: var(--shadow-2);
}
.promotion-header-title {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  vertical-align: baseline;
}
.promotion-header-title h1 {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: inherit;
  z-index: 1;
  font-size: 56px;
  line-height: 64px;
  margin-bottom: var(--spacing-20);
  text-align: unset;
  color: var(--text-title-color-1);
}
.p-detail {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.p-detail p {
  font-size: 24px;
  line-height: 32px;
  opacity: 0.8;
  text-align: center;
  color: var(--text-title-color-1);
}

.promotion-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 0px;
}
.promotion-main-header {
  width: 100%;
  padding-top: var(--spacing-page-mid);
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: var(--white-card-color-1);
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.t-progress-demo-margin {
  margin-bottom: 10px;
}
.t-progress-demo-box {
  margin: 10px 0 10px;

  .t-progress-demo-inner {
    margin: 15px;
    min-width: 160px;
  }
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.goods-container {
  display: flex;
  align-items: center;
}
.cover {
  width: 100px;
  height: 100px;
  margin-right: 2rem;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.goods-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 1rem;
  color: var(--text-title-color);
}

.goods-info .name {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.goods-info .specs {
  margin-bottom: 10px;
}
@media screen and (max-width: 1100px) {
  .goods-info {
    margin-top: 1rem;
  }
  .price-time {
    margin-top: 2rem;
  }
  .goods-container {
    width: 100%;
  }
  .promotion-header-title h1 {
    font-size: 2.5rem !important;
  }
  .title-1 h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
  .p-detail p {
    font-size: 1.5rem !important;
  }
  .data-cards {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .title-1 h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 1101px) {
  .content-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .goods-container {
    width: 40%;
  }
  .price-time {
    width: 60%;
  }
  .cover {
    margin-right: 2rem;
  }
  .goods-info {
    margin: 0;
  }
  .promotion-main-header {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .view-1 {
    padding-left: 3.4285rem !important;
    padding-right: 3.4285rem !important;
  }
}

.view-1 {
  margin-top: var(--spacing-page-mid-120);
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-page-mid-120);
}
.view-1 {
  width: 100%;
  max-width: 1440px;
  max-width: var(--view-1);
  box-sizing: border-box;
}

.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate__bounceInUp {
  animation-name: bounceInUp;
}

@media screen and (max-width: 650px) {
  p {
    font-size: 1rem !important;
    white-space: nowrap;
  }
  .pro-data-commission {
    display: block;
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
</style>
